<template>
  <view>
    <view class="container form-content">
      <uni-forms ref="form" :modelValue="formData" :rules="rules" labelWidth="120px" labelPosition="top">
        <view class="container">
          <view class="hidden-title">基本信息</view>
          <view class="background-white">
            <view class="flex text bor-btm">
              <text class="text-label"> 润滑部位1： </text>
              <text>{{ detail.position || '--' }}</text>
            </view>
            <view class="flex text bor-btm">
              <text class="text-label"> 油脂xs规格型号： </text>
              <text>{{ detail.className || '--' }}</text>
            </view>
            <view class="flex text bor-btm">
              <text class="text-label"> 润滑标准： </text>
              <text>{{ detail.standard || '--' }}</text>
            </view>
            <view class="flex text bor-btm">
              <text class="text-label"> 润滑方式： </text>
              <text>{{ ['加油', '换油'][detail.method] || '--' }}</text>
            </view>
            <view class="flex text bor-btm">
              <text class="text-label"> 加油量： </text>
              <text>{{ detail.oid || '--' }}</text>
            </view>
          </view>
        </view>
        <view>
          <view class="background-white">
            <uni-forms-item name="oid" label="实际加/换油量（kg）：" label-width="200px">
              <textarea v-model="formData.oid" class="text-area" placeholder="请填写实际加/换油量" maxlength="1000" />
            </uni-forms-item>
          </view>
        </view>
      </uni-forms>
    </view>
    <view class="submit-group">
      <button class="u-button" :ripple="true" @click="submit(1)">正常</button>
      <button class="u-button u-button-orange block" type="danger" :ripple="true" @click="goMatterReportDefects">
        上报缺陷
      </button>
    </view>
  </view>
</template>

<script>
import { queryLubricationTaskDetail, executeLubricationTask } from '@/api/equipment/lubrication'

export default {
  data() {
    return {
      taskId: '',
      standardId: '',
      detail: {
        position: '',
        className: '',
        standard: '',
        method: '',
        oid: ''
      },
      formData: {
        oid: '',
        status: '',
        taskSubItemId: ''
      },
      rules: {
        oid: {
          rules: [
            {
              required: true,
              errorMessage: '实际加/换油量不能为空'
            }
          ]
        }
      }
    }
  },
  onLoad({ title, taskId, itemId, standardId }) {
    this.setTitle(title)
    this.taskId = taskId
    this.formData.taskSubItemId = itemId
    this.standardId = standardId
    this.getDetail()
  },
  onPullDownRefresh() {
    this.getDetail()
  },
  methods: {
    setTitle(title) {
      uni.setNavigationBarTitle({
        title: title
      })
    },
    getDetail() {
      queryLubricationTaskDetail(this.taskId).then(({ data }) => {
        this.detail = (data.standardItems || []).filter((item) => item.id == this.standardId)[0] || {}
        this.detail.deviceId = data.deviceId
        this.detail.areaName = data.areaName
        this.detail.deviceName = data.deviceName
        this.detail.areaId = data.areaId
      })
    },
    submit(status) {
      this.$refs.form.validate().then(async (valid) => {
        if (valid) {
          this.formData.status = status // 正常
          this.formData.taskSubItemId = Number(this.formData.taskSubItemId)
          await executeLubricationTask(this.formData)
          this.$modal.msgSuccess('保存成功')
          uni.navigateBack()
        }
      })
    },
    // 上报隐患
    goMatterReport() {
      uni.navigateTo({
        url: `/pages/work/hiddenDangerReport/index?reportType=3&areaId=${this.detail.areaId}`,
        // url: `/pages/work/intelligentPatrolInspection/lubricationMatter/report?deviceId=${this.detail.deviceId}`,
        events: {
          // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
          'callback:success': () => {
            this.submit(2)
          }
        }
      })
    },
    // 上报缺陷
    goMatterReportDefects() {
      this.$refs.form.validate().then(async (valid) => {
        if (valid) {
          uni.navigateTo({
            url: `/pages/work/intelligentPatrolInspection/lubricationMatter/reportDefects?deviceId=${this.detail.deviceId}&location=${this.detail.areaName}&deviceName=${this.detail.deviceName}`,
            events: {
              // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
              'callback:success': () => {
                this.submit(3)
              }
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="scss">
.container {
  .background-white {
    background-color: #fff;
    padding: 20rpx 30rpx;
    box-sizing: border-box;

    .uni-forms-item__label {
      color: #333;
      font-size: 30rpx;
    }

    .bor-btm {
      border-bottom: 1px solid #d5d7e3;
    }

    .photo {
      display: flex;
      justify-content: space-between;

      image {
        width: 214rpx;
        height: 214rpx;
      }
    }

    .text {
      padding-bottom: 20rpx;
      padding-top: 4rpx;
      color: #333;

      text {
        color: #666;
      }
    }
  }
}

.hidden-title {
  background: #f5f5f5;
  padding: 20rpx;
  color: #999;
}

.bor-top {
  border-top: 20rpx solid #f5f5f5;
}

.form-content {
  margin-bottom: 120px;
}
</style>
